import React from 'react'
import { Activity, Cpu, HardDrive, Network } from 'lucide-react'
import { MonitorPerformanceMetrics } from '@/types/monitor'

interface PerformanceMetricsProps {
  performanceMetrics: MonitorPerformanceMetrics | null
  formatBytes: (bytes: number) => string
}

export default function PerformanceMetrics({ performanceMetrics, formatBytes }: PerformanceMetricsProps) {
  return (
    <div className="bg-white rounded-lg shadow-sm border">
      <div className="p-6 border-b">
        <h3 className="text-lg font-semibold">性能指标</h3>
        <p className="text-sm text-gray-600">系统资源使用情况</p>
      </div>
      <div className="p-6">
        {performanceMetrics ? (
          <div className="space-y-4">
            {/* CPU使用率 */}
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Cpu className="w-5 h-5 text-blue-500 mr-2" />
                <span className="text-sm font-medium">CPU使用率</span>
              </div>
              <span className="text-sm font-mono">{performanceMetrics.cpu_usage.toFixed(1)}%</span>
            </div>

            {/* 内存使用率 */}
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <HardDrive className="w-5 h-5 text-green-500 mr-2" />
                <span className="text-sm font-medium">内存使用率</span>
              </div>
              <span className="text-sm font-mono">{performanceMetrics.memory_usage.toFixed(1)}%</span>
            </div>

            {/* 磁盘使用率 */}
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <HardDrive className="w-5 h-5 text-orange-500 mr-2" />
                <span className="text-sm font-medium">磁盘使用率</span>
              </div>
              <span className="text-sm font-mono">{performanceMetrics.disk_usage.toFixed(1)}%</span>
            </div>

            {/* 网络IO */}
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Network className="w-5 h-5 text-purple-500 mr-2" />
                <span className="text-sm font-medium">网络IO</span>
              </div>
              <div className="text-right">
                <div className="text-xs text-gray-500">
                  ↑ {formatBytes(performanceMetrics.network_io.bytes_out)}
                </div>
                <div className="text-xs text-gray-500">
                  ↓ {formatBytes(performanceMetrics.network_io.bytes_in)}
                </div>
              </div>
            </div>

            {/* Kafka指标 */}
            <div className="border-t pt-4 mt-4">
              <h4 className="text-sm font-semibold mb-3">Kafka指标</h4>

              <div className="flex items-center justify-between mb-2">
                <span className="text-sm">消息/秒</span>
                <span className="text-sm font-mono">
                  {performanceMetrics.kafka_metrics.messages_per_second.toFixed(1)}
                </span>
              </div>

              <div className="flex items-center justify-between mb-2">
                <span className="text-sm">字节/秒</span>
                <span className="text-sm font-mono">
                  {formatBytes(performanceMetrics.kafka_metrics.bytes_per_second)}
                </span>
              </div>

              <div className="flex items-center justify-between">
                <span className="text-sm">活跃连接</span>
                <span className="text-sm font-mono">
                  {performanceMetrics.kafka_metrics.active_connections}
                </span>
              </div>
            </div>
          </div>
        ) : (
          <div className="text-center py-8">
            <Activity className="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <p className="text-gray-500">暂无性能数据</p>
          </div>
        )}
      </div>
    </div>
  )
}
